<template>
    <div class="newbookstore">
        <h2>新书上市</h2>
        <div class="newbookstore-content">
            <div v-for='item in newbooks' :key="item.id" class="newbook">
                <div class="img">
                    <img :src='baseURL+item.bigImgUrl' @click="passsrcURL(item.id)">
                </div>
				<div class="desc">
					<span @click="$router.push('/book_detail'+item.id)">{{item.title}}</span> 
				</div>
				<span class="newbook-price">￥{{item.price | realPrice(item.discount)}}</span>
            </div>
        </div>
		<LargePicture :srcURL="src" v-if="isenlarge"></LargePicture>
    </div>
</template>

<script>
import LargePicture from "../LargePicture.vue";
import { mapState,mapMutations } from "vuex";

export default {
    name: 'NewBooks',
		data() {
			return {
				baseURL: 'http://111.229.37.167/',
				newbooks: [],
				src:'',
			}
		},
	computed: {
		...mapState([
			'isenlarge',
		])
	},
	methods:{
		...mapMutations([
			'setpicturesize'
		]),
		passsrcURL:function(bookid){
			this.src = this.baseURL+this.newbooks[bookid-1]['bigImgUrl']
			this.setpicturesize(true)
		},
	},
  	components:{
		LargePicture
	},
	created() {
		this.axios.get('/book/new')
		.then((response) => {
			if (response.status == 200) {
				this.newbooks = response.data;
			}else{
				console.log(response.status)
			}
		})
		.catch((err) => {
			console.log(err)
		})
	}
}
</script>

<style lang="less">
div.newbookstore {
	text-align: center;
  margin: 2em;
}
.newbookstore-content{
	width: 90%;
	display: flex;
	margin: 0 auto;
	margin-top: 2rem;
	justify-content: space-around;
}
div.newbook {
		position: relative;
    	width: 16.5%;
		min-width: 115px;
		display: block;
		height: auto;
		background-color: rgb(12, 11, 11);
		border-left-style:100px solid ;
		border-bottom-style: double;
		border-right-style:  double;
		border-top-style: thick solid;
		border-color: CadetBlue;
		border-radius: 15px;
		box-sizing: border-box;
		border-width: 2px 5px 3px 2px;
}
div.img {
    height: 65%;
}


div.img img {
    width: 100%;
	height: 100%;
	border-radius: 10px 8px 5px 5px;
}
div.desc {
    padding: 5px 15px 0 15px;
    text-align: center;
    color: black;
    font: 14px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color: #967f8f;
		
		span:hover {
			cursor: pointer;
			text-decoration: underline;
		}
}
.newbook-price {
		width: 100%;
		color: rgb(252, 21, 21);
		position: absolute;
		bottom: 0%;
		left: 50%;
		margin-left: -50%;
		/* transform: translateX(0%); */
}

</style>


